<!doctype html>
<html lang="cn">
<head>
  <title>工作流待办列表</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="./editor-app/libs/bootstrap_3.1.1/css/bootstrap.css">
  <link rel="stylesheet" href="./editor-app/libs/bootstrap_3.1.1/css/bootstrap-theme.css">

  <script src="./editor-app/app-cfg.js?v=1"></script>
  <script src="./editor-app/libs/jquery_1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="./editor-app/libs/bootstrap_3.1.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="./editor-app/editor-utils.js"></script>

  <style>
    #flowTodoTable {
      margin-top: 8px;
    }

    #flowTodoForm > div {
      padding-left: 0;
    }

    #flowTodoPage .pagination {
      margin: 0 0;
    }

    #flowTodoPage a.page-item-disable {
      cursor: not-allowed;
    }

    #flowTodoPage a.page-item-enable {
      cursor: pointer;
    }

    #flowTodoTable span.label:hover {
      cursor: pointer;
    }

    #flowModal .modal-lg {
      width: 70%;
    }

    #flowModal .modal-svg {
      height: 300px;
      overflow-y: auto;
      border: 1px solid #eee;
    }

    #flowModal .modal-opinion {
      height: 300px;
      overflow-y: auto;
    }

    #flowModal table .message {
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏超出容器的文本 */
      text-overflow: ellipsis; /* 在超出容器的文本末尾显示省略号 */
      width: 200px; /* 设置容器宽度 */
    }
  </style>

  <script type="text/javascript">
    $(function () {
      const height = $(window).height() - 80;
      $('#flowTodoTable').height(height);
      // 初始化选择内容
      window.Ext = {
        basePath: ACTIVITI.CONFIG.contextRoot,
        param: {
          userId: EDITOR.UTIL.getParameterByName('userId'), // 用户
          deptId: EDITOR.UTIL.getParameterByName('deptId'), // 部门
          areaCode: EDITOR.UTIL.getParameterByName('area'), // 主题
          dataType: EDITOR.UTIL.getParameterByName('type'), // 数据类型
        },
        dataSource: [],
        pageInfo: {
          size: 50,
          current: 1,
          total: 0,
        },
      };
      queryList();
    });

    function skipFlow(decision) {
      const arr = $('#flowTodoTable table>tbody input[type="checkbox"]:checked');
      let dataIdList = [];
      for (let i = 0; i < arr.length; i++) {
        dataIdList.push($(arr[i]).val());
      }
      const param = {
        "taskId": "taskId_a1d472007c50",
        ...Ext.param,
        "decision": decision,
        "message": $('#flowTodoForm input[name="message"]').val(),
        "dataList": Ext.dataSource.filter((it) => dataIdList.indexOf(it.dataId) > -1),
      };
      $.ajax({
        url: Ext.basePath + '/flow/run/skip', // 指定JSON数据的URL
        contentType: "application/json",
        dataType: 'json', // 指定数据类型为JSON
        type: 'POST',
        data: JSON.stringify(param),
        success: function(data) {
          queryList();
        },
        error: function(jqXHR, textStatus, errorThrown) {
          // 请求失败后的回调函数
          console.error('Error fetching data: ', textStatus, errorThrown);
        }
      });
    }

    function showFLowWin(modelId, idx) {
      $.get(`${Ext.basePath}/flow/model/svg/${modelId}`, function(flowSvg) {
        $('#flowModal .modal-svg').html(flowSvg);
        $('#flowModal').modal();
        queryOpinion(Ext.dataSource[idx]);
      });
    }
    
    function queryOpinion(rec) {
      $('#flowModal .modal-opinion table>tbody').empty();
      const param = { ...rec };
      $.ajax({
        url: Ext.basePath + '/flow/run/opinion', // 指定JSON数据的URL
        contentType: "application/json",
        dataType: 'json', // 指定数据类型为JSON
        type: 'POST',
        data: JSON.stringify(param),
        success: function(list) {
          list.forEach((it, idx) => {
            $('#flowModal .modal-opinion table>tbody').append(`
               <tr data-idx="${idx}">
                <td>${idx + 1}</td>
                <td>${it.createBy}</td>
                <td>${it.createTime}</td>
                <td>${it.decisionName}</td>
                <td><span class='message'>${it.message}</span></td>
                <td>${it.auditName}</td>
              </tr>
            `);
          });
        },
        error: function(jqXHR, textStatus, errorThrown) {
          // 请求失败后的回调函数
          console.error('Error fetching data: ', textStatus, errorThrown);
        }
      });
    }

    function queryList() {
      const param = {
        ...Ext.pageInfo,
        queryObject: {
          ...Ext.param,
          dataDesc: $('#flowTodoForm input[name="dataDesc"]').val(),
        },
      };
      $.ajax({
        url: Ext.basePath + '/flow/run/todo', // 指定JSON数据的URL
        contentType: "application/json",
        dataType: 'json', // 指定数据类型为JSON
        type: 'POST',
        data: JSON.stringify(param),
        success: function(data) {
          renderList(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          // 请求失败后的回调函数
          console.error('Error fetching data: ', textStatus, errorThrown);
        }
      });
    }

    function renderList(data) {
      $('#flowTodoTable table>tbody').empty();
      if (data && data.records.length > 0) {
        Ext.dataSource = data.records;
        Ext.dataSource.forEach((it, idx) => {
          $('#flowTodoTable table>tbody').append(`
           <tr data-idx="${idx}">
            <td>
              <input type="checkbox" name="data" value="${it.dataId}" />
            </td>
            <td>${idx + 1}</td>
            <td>${it.dataId}</td>
            <td>${it.dataDesc}</td>
            <td>${it.areaCode}</td>
            <td>${it.dataType}</td>
            <td>${it.workFlowId}</td>
            <td>${it.auditName}</td>
            <td>
              <span class="label label-info" onclick="showFLowWin('${it.actModelId}', ${idx})">查看</span>
            </td>
          </tr>
        `);
        });
        const pages = Math.ceil(data.total / Ext.pageInfo.size);
        const start = Math.floor(Ext.pageInfo.current / 5) + 1;
        const end = Math.min(pages, start + 5);
        const paginationEl = $('#flowTodoPage ul.pagination');
        paginationEl.empty();
        const clsStart = Ext.pageInfo.current > 1? "page-item-enable" : "page-item-disable";
        paginationEl.append(`<li><a class="${clsStart} prev" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>`);
        for (let i = start; i <= end; i++) {
          paginationEl.append(`<li><a class="page-item-enable item">${i}</a></li>`);
        }
        const clsEnd = Ext.pageInfo.current < pages? "page-item-enable" : "page-item-disable";
        paginationEl.append(`<li><a class="${clsEnd} next" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>`);
        // 绑定事件
        if (Ext.pageInfo.current > 1) {
          $('#flowTodoPage a.prev').click(function () {
            Ext.pageInfo.current = Ext.pageInfo.current - 1;
            queryList();
          });
        }
        if (Ext.pageInfo.current < pages) {
          $('#flowTodoPage a.next').click(function () {
            Ext.pageInfo.current = Ext.pageInfo.current + 1;
            queryList();
          });
        }
        $('#flowTodoPage a.item').click(function () {
          let num = $(this).html();
          Ext.pageInfo.current = Number(num);
          queryList();
        });
        $('#flowTodoTable table>thead input[name="all"]').click(function () {
          const isCheck = $(this).prop('checked');
          $('#flowTodoTable table>tbody input[type="checkbox"]').prop('checked', isCheck);
        });
      }
    }
  </script>
</head>

<body class="container-fluid">
  <div id="flowTodoForm" class="row">
    <div class="col-md-4">
      <div class="input-group">
        <input type="text" class="form-control" name="dataDesc" placeholder="数据描述" value="" />
        <span class="input-group-btn">
          <button class="btn btn-default" type="button" onclick="queryList()">搜索</button>
        </span>
      </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
    <div class="col-md-4">
      <div class="input-group">
        <input type="text" class="form-control" name="message" placeholder="意见" value="" />
        <span class="input-group-btn">
          <button class="btn btn-default" type="button" onclick="skipFlow(2)">同意</button>
          <button class="btn btn-default" type="button" onclick="skipFlow(0)">拒绝</button>
        </span>
      </div>
    </div>
  </div><!-- /.row -->
  <div id="flowTodoTable" class="row">
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th><input type="checkbox" name="all" value="1" /></th>
          <th>序号</th>
          <th>数据ID</th>
          <th>数据描述</th>
          <th>主题编码</th>
          <th>类型编码</th>
          <th>工作流ID</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <div id="flowTodoPage" class="row">
    <ul class="pagination"></ul>
  </div>
  <!-- 流程图 -->
  <div class="modal fade" id="flowModal" tabindex="-1" role="dialog" aria-labelledby="flowTitle">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="flowTitle">流程详情</h4>
        </div>
        <div class="modal-body">
          <div class="modal-svg"></div>
          <div class="modal-opinion">
            <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th style="width: 80px">序号</th>
                  <th style="width: 80px">操作人</th>
                  <th style="width: 80px">操作时间</th>
                  <th style="width: 80px">操作名称</th>
                  <th style="width: 200px">意见</th>
                  <th style="width: 80px">状态</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
